<template>
    <el-pagination :total="total" layout="total,sizes,prev,pager,next,jumper" background :page-sizes="[10, 20, 40, 60]"
        :current-page="currentPage" :page-size="pageSize" @current-change="currentChange" @size-change="sizeChange"
        v-bind="props.props"></el-pagination>
</template>

<script setup lang="ts">
import type { MyPaginationType } from "./MyPagination";

const props = defineProps<MyPaginationType>()

const emit = defineEmits<{
    (e: 'update:currentPage', currentPage: number): void
    (e: 'update:pageSize', pageSize: number): void
    (e: 'change', currentPage: number, pageSize: number): void
}>()

const currentChange = (currentPage: number) => {
    emit('update:currentPage', currentPage)
    emit("change", currentPage, props.pageSize)
}

const sizeChange = (pageSize: number) => {
    emit('update:pageSize', pageSize)
    emit("change", props.currentPage, pageSize)
}

</script>

<style scoped></style>